<template>
  <div>
    <div class="wrapper">
      <!--div class="box">
        <div>
          <span class="title1">＋</span><br>
          <span>添加桌号</span>
        </div>
      </div-->
      <div v-for="item in seatList" :key="item.seatId" class="box" @click="handSeat(item)">
        <div>
          <span class="title1">{{ item.seatNumber }}</span><br>
          <span>{{ item.customerNumber }}人桌</span><br>
          <el-tag v-if="item.seatStatus === '空闲'" type="success">空闲</el-tag>
          <el-tag v-else-if="item.seatStatus === '就餐中'" type="danger">就餐中</el-tag>
        </div>
      </div>
    </div>

    <!-- 选择人数对话框 -->
    <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
      <el-form ref="form" :model="form" label-width="120px">
        <!-- 数据编辑表单组件 -->
        <el-form-item label="座位号" prop="seatNumber" disable>
          <el-input v-model="form.seatNumber" placeholder="请输入座位号" />
        </el-form-item>
        <el-form-item label="就餐人数" prop="customerNumber">
          <el-input-number v-model="form.customerNumber" :min="1" :max="30" label="就餐人数" />
        </el-form-item>
      </el-form>
      <!-- 数据提交操作按钮 -->
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>

  </div>
</template>

<script>
/** 导入axios Api */
import { listAllSeat } from '@/api/order/seat'
export default {
  name: 'Seat',
  data() {
    return {
      seatList: [],
      title: '选择就餐人数',
      open: false,
      form: {
        seatNumber: null,
        customerNumber: null
      }
    }
  },
  watch: {
    '$route.path': {
      handler(newName, oldName) {
        if (newName === '/order/seat') {
          this.getSeatList()
        }
      },
      immediate: true // 首次加载是否进行监听
    }
  },
  created() {
    this.getSeatList()
  },
  methods: {
    /** 查询座位 */
    getSeatList() {
      listAllSeat().then((response) => {
        this.seatList = response.data
      })
    },

    /** 点击座位选择人数 **/
    handSeat(item) {
      if (item.seatStatus === '空闲') {
        this.open = true
        this.form.seatNumber = item.seatNumber
      } else {
        this.$router.push({
          path: 'placeAnOrder',
          query: {
            seatNumber: item.seatNumber,
            seatStatus: item.seatStatus
          }
        })
      }
      this.getSeatList()
    },

    /** 选中座位跳转下单页面 **/
    submitForm() {
      this.$router.push({
        path: 'placeAnOrder',
        query: {
          seatNumber: this.form.seatNumber,
          customerNumber: this.form.customerNumber
        }
      })
      this.open = false
      this.getSeatList()
    },

    cancel() {
      this.open = false
    }
  }
}
</script>

<style lang="scss" scoped>
.wrapper{
            display: grid;
            grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
            padding: 50px;
            background: #F5F5F5;
        }
        .box {
            margin: 10px;

        }
        .box div {
            background: #FFFFFF;
            border-radius: 3px;
            height: 170px;
            text-align: center;
            font-size: 20px;
            font-weight: bold;
            padding: 30px 0px;
            border: 2px solid #FFFFFF;
            border-radius: 15px;

            .title1 {
                font-size: 40px;
            }
        }
        .box div:hover {
            background: #409EFF;
            color: #FFFFFF;
        }
</style>
